class PayCustAliWizard extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            alipayParams : {
                secret : '',
                secret2: ''
            },
            alipayParamsList : []
        }
    }

    componentDidMount(){
        this.updateAuthedList(1,10);
    }

    goHelp(){
        window.location.href = "/api/v3/cms/anon/getContent?ueditorId=help_alipay_user_params&template=UecontentWebWithFrame";
    }

    saveAliPayAccount(){
        layui.layer.confirm("确定为支付宝账户["+this.refs.alipayAccount.value+"]提交代签申请么?",()=>{
            postJson("/customer/pay/saveAlipayAccount.x",{alipayAccount:this.refs.alipayAccount.value},()=>{
                layui.layer.msg("保存成功");
                this.refs.table.refresh();
            })
        })
    }

    updateAuthedList(page,pageSize){
        postJson("/pay/getAlipaySecretsPage.x",{page:page,pageSize:pageSize},(data)=>{
            this.pageCount = data.data.size;
            this.setState({alipayParamsList:data.data.list});
        })
    }

    addNewParam(){
        this.setState({alipayParams:emptyObj(this.state.alipayParams)});
        this.refs.modal.show();
    }

    saveAliPayParams(){
        this.state.alipayParams.type = "alipay";
        postJson("/customer/pay/saveSecretByUser.x",this.state.alipayParams,()=>{
            layui.layer.msg("保存成功");
            this.refs.modal.close();
            this.refs.table.refresh();
        })
    }

    modify(param){
        this.setState({alipayParams:param});
        this.refs.modal.show();
    }

    delete(param){
        layui.layer.confirm("确定要删除此数据么?",()=>{
            postJson("/customer/pay/deleteDetail.x",{id : param.id},()=>{
                layui.layer.msg("删除成功");
                this.refs.table.refresh();
            })
        })

    }

    inputOnchange(param,value){
        this.state.alipayParams[param] = value;
        this.setState({alipayParams : this.state.alipayParams});
    }

    payTest(param){
        if(!param.appId || !param.secret || !param.secret2){
            layui.layer.msg("参数不完整,请先录入参数!");
            return;
        }
        this.refs.modalPayTest.show({typeData:'/pay/getPayTestQRCode.x'});
    }

    render(){
        return (
            <Frame header="支付宝管理" headerBtns={[<HeaderBtn onClick={()=>this.goHelp()}><i className="fa fa-question-circle-o" style={{fontSize:16}}></i>&nbsp;帮助文档</HeaderBtn>]}>
                <Tab type="brief" titles={['支付宝账号录入','支付宝参数列表']}>
                    <TabItem show="true">
                        <Blockquote>请提供支付宝企业账号,详情请查看帮助文档</Blockquote>
                        <Form>
                            <Item>
                                <Label>支付宝账号</Label>
                                <Input ref="alipayAccount" lay-verify="required"/>
                            </Item>
                            <Item>
                                <Button lay-submit="true" formBtn="true" onClick={()=>this.saveAliPayAccount()}>确定</Button>
                            </Item>
                        </Form>
                    </TabItem>
                    <TabItem>
                        <Table ref="table" count={this.pageCount}
                               pageOnClick={(page,pageSize)=>this.updateAuthedList(page,pageSize)} style={{tableLayout:"fixed"}}>
                            <thead>
                                <tr>
                                    <th>支付宝账号</th>
                                    <th>AppId</th>
                                    <th width="25%">私钥</th>
                                    <th width="25%">公钥</th>
                                    <th width={180}>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                            {
                                this.state.alipayParamsList.length > 0?this.state.alipayParamsList.map((param)=>{
                                    return (
                                        <tr>
                                            <td style={{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{param.mchId}</td>
                                            <td style={{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{param.appId?param.appId:'等待录入'}</td>
                                            <td style={{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{param.secret?param.secret:'等待录入'}</td>
                                            <td style={{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{param.secret2?param.secret2:'等待录入'}</td>
                                            <td>
                                                <Button btnType="normal" size="xs" onClick={()=>this.modify(Object.create(param))}>参数录入</Button>
                                                <Button btnType="danger" size="xs" onClick={()=>this.delete(param)}>删除</Button>
                                                <Button btnType="primary" size="xs" onClick={()=>this.payTest(param)}>支付测试</Button>
                                            </td>
                                        </tr>
                                    )
                                }):''
                            }
                            </tbody>
                        </Table>
                    </TabItem>
                </Tab>
                <Modal title="支付宝参数录入" ref="modal">
                    <Form size="sm">
                        <Item>
                            <Label>支付宝账号</Label>
                            <Input value={this.state.alipayParams.mchId} lay-verify="required" onChange={(value)=>this.inputOnchange('mchId',value)}/>
                        </Item>
                        <Item>
                            <Label>AppId</Label>
                            <Input value={this.state.alipayParams.appId} lay-verify="required" onChange={(value)=>this.inputOnchange('appId',value)}/>
                        </Item>
                        <Item>
                            <Label>支付宝私钥</Label>
                            <Input value={this.state.alipayParams.secret} lay-verify="required" onChange={(value)=>this.inputOnchange('secret',value)}/>
                        </Item>
                        <Item>
                            <Label>支付宝公钥</Label>
                            <Input value={this.state.alipayParams.secret2} lay-verify="required" onChange={(value)=>this.inputOnchange('secret2',value)}/>
                        </Item>
                        <Item>
                            <Button size="sm" lay-submit="true" formBtn="true" onClick={()=>this.saveAliPayParams()}>确定</Button>
                        </Item>
                    </Form>
                </Modal>
                <Modal ref="modalPayTest" modalType="photo">
                </Modal>
            </Frame>
        )
    }

}

ReactDOM.render(<PayCustAliWizard/>,document.getElementById("payCustAliWizard"));